@import './base/index';
@import './reset';
@import './iconfont/iconfont.css';

html {
  scroll-behavior: smooth;
  background: #fafafb;
}

#root {
  display: flex;
  flex-direction: column;
  height: 100%;
}

::selection {
  color: white;
  // background: $themeColor;
  background: #1E3DD0;
}

@include padding; // pl10
@include margin; // ml10
@include marginPercent; // ml10p
@include fontSize; // fs20 fs30
@include fontWeight; // fw300
@include textAlign; // ta-c
@include color; // gray red theme-color
@include position; // pos-r pos-a pos-f
@include display; // dis-i dis-ib dis-f dis-n


.h100p {
  height: 100%;
}

.w100p {
  width: 100%;
}

.flex-row {
  @include flex(row);
}

.flex-col {
  @include flex(column);
}

.flex1 {
  flex: 1;
}

.center {
  @include centerByPosition;
}

.hide {
  display: none !important;
}

.text-overflow-1 {
  @include maxLines(1);
}

.text-overflow-2 {
  @include maxLines(2);
}

.text-overflow-3 {
  @include maxLines(3);
}

.text-overflow-4 {
  @include maxLines(4);
}

.text-overflow-100 {
  @include maxLines(100);
}

.m-auto {
  margin: auto;
}

.va-m {
  vertical-align: middle;
}

.collapsible {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s linear;
}

.collapsible.open {
  max-height: 1000px;
}


.text-uppercase {
  text-transform: uppercase;
}

.thin-scroll-bar {
  overflow-y: auto;

  &::-webkit-scrollbar {
    width: 5px;
  }

  &::-webkit-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #ead5fe;
    border-radius: 3px;
  }

  &::-webkit-scrollbar-button {
    background-color: transparent;
    height: 3px;
    display: none;
  }

  &::-webkit-scrollbar-corner {
    background-color: #f1f1f1;
  }

  &::-moz-scrollbar {
    width: 5px;
    height: 5px;
  }

  &::-moz-scrollbar-track {
    background-color: #f1f1f1;
    border-radius: 3px;
  }

  &::-moz-scrollbar-thumb {
    background-color: #ead5fe;
    border-radius: 3px;
  }

  &::-moz-scrollbar-button {
    background-color: transparent;
    height: 3px;
    display: none;
  }

  &::-moz-scrollbar-corner {
    background-color: #f1f1f1;
  }
}


// ----------------- magento css ------------->
.SliderContnt {
  position: absolute;
  width: 100vw;
  left: 0px;
  bottom: 67px;
  right: 0px;
  z-index: 999;
  box-sizing: border-box;

  .ContSldMaxWdth {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
    text-align: right;
    z-index: 9;
    transition: all .3s ease-in-out;
    -webkit-transition: all .3s ease-in-out;
    -o-transition: all .3s ease-in-out;
  }
}